<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <Actions @update="updateUser" :user="user" class="actions-container" />
      <Promised :promise="getUserAsync">
        <template v-slot:pending>
          <Skeleton />
        </template>
        <template>
          <section>
            <BasicForm :user="user" />

            <a-divider />

            <PositionForm :user="user" />

            <a-divider />
            <Roles :user="user" />
          </section>
        </template>
      </Promised>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getUser } from '@/api/flow/user'
import Actions from './Actions.vue'
import BasicForm from './Basic.vue'
import PositionForm from './Position.vue'
import Roles from '../modify/Roles'

export default {
  data () {
    return {
      getUserAsync: null,

      user: {
        department_identity: '',
        mobile: '',
        username: '',
        status: true,
        role: [],
        group: [],
        position: [],
      },
    }
  },

  components: {
    Actions,
    BasicForm,
    PositionForm,
    Roles,
  },

  created () {
    this.getUserAsync = this.getUser()
  },

  computed: {
    uid () {
      return this.$route.params.uid
    },
  },

  methods: {
    updateUser () {
      // this.getUser();
      this.getUser()
    },

    getUser () {
      return new Promise((resolve, reject) => {
        getUser(this.uid)
          .then(data => {
            this.user = data
            resolve(data)
          })
          .catch(error => {
            reject(error)
          })
      })
    },
  },
}

</script>

<style lang="scss" scoped>
.actions-container {
  margin-bottom: $margin-md;
}
</style>
